<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue学习</title>
</head>

<body>
    <div id="app">{{message}}</div>
    <div id="app-2">
        <span v-bind:title='mes'>
            鼠标悬停几秒钟查看此处动态绑定的提示信息
        </span>
    </div>
    <div id="app-3">
        <p v-if='seen'>现在你看到我了</p>
        <p>sji</p>
    </div>

    <div id="app-4">
        <ol>
            <li v-for='item in todos'>
                {{item.text}}
            </li>
        </ol>
    </div>
    <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">逆转信息</button>
    </div>

    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <div id="app-7">
        <ol>
            <todo-item v-bind:todo='item' v-for="item in groceryList"></todo-item>
        </ol>
    </div>
    <button></button>
    <button></button>
    <button></button>

    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello Vue'
            }
        })
        console.log(Vue)


        var app2 = new Vue({
            el: '#app-2',
            data: {
                mes: '页面加载于' + new Date()
            }
        })
        var app3 = new Vue({
            el: '#app-3',
            data: {
                seen: false
            }
        })
        var app4 = new Vue({
            el: '#app-4',
            data: {
                todos: [{
                    text: 'shishuaichao'
                }, {
                    text: 'jujishou'
                }, {
                    text: 'ligang'
                }, {
                    text: 'youchaojie'
                }]
            }
        })


        var app5 = new Vue({
            el: '#app-5',
            data: {
                message: 'hello Vue'
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })

        var app6 = new Vue({
            el: '#app-6',
            data: {
                message: 'hello Vue'
            }
        })

        Vue.component('todo-item', {
            props: ['todo'],
            template: '\<li>{{todo.text}}\</li>'
        })

        var app7 = new Vue({
            el:'#app-7',
            data:{
                groceryList:[
                    {
                        text:'mengniu'
                    },
                    {
                        text:'yili'
                    },
                    {
                        text:'chaojie'
                    }
                ]
            }
        })
    </script>
</body>

</html>